<template>
	<PageLayout title="选择名片模板">
		<view class="templates-container">
			<view class="template-item" v-for="template in templates" :key="template.id"
				@click="selectTemplate(template.id)">
				<view class="template-preview">
					<template v-if="template.component === 'TemplateDefault'">
						<TemplateDefault :card-info="cardInfo" />
					</template>
					<template v-else-if="template.component == 'TemplateElegant'">
						<TemplateElegant :card-info="cardInfo" />
					</template>
					<template v-else-if="template.component === 'TemplateModern'">
						<TemplateModern :card-info="cardInfo" />
					</template>
					<template v-else-if="template.component === 'TemplateProfessional'">
						<TemplateProfessional :card-info="cardInfo" />
					</template>
				</view>
				<view class="template-name">{{ template.name }}</view>
				<view class="template-selector" v-if="templateInfo.type === template.id">
					<text class="icon-check">✓</text>
				</view>
			</view>

			<!-- 引入并使用另一个页面组件 -->
			<editUser />
		</view>
	</PageLayout>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		useRouter
	} from '@/plugin/uni-mini-router'
	import {
		useToast
	} from 'wot-design-uni'
	import TemplateDefault from '@/pages/card/components/TemplateDefault.vue'
	import TemplateElegant from '@/pages/card/components/TemplateElegant.vue'
	import TemplateModern from '@/pages/card/components/TemplateModern.vue'
	import TemplateProfessional from '@/pages/card/components/TemplateProfessional.vue'

	// 导入另一个页面组件
	import editUser from '@/pages/card/userEdit.vue';
	// 路由实例
	const router = useRouter()
	import {
		cardStore
	} from '@/store/card.ts';
	const cdStore = cardStore()

	// 状态管理
	const {
		templateInfo,
		setTemplate
	} = cdStore

	// 消息提示
	const toast = useToast()

	// 预览数据
	const previewInfo = {
		name: '张三default',
		title: '总经理',
		company: '深圳市惠森信息科技有限公司',
		phone: '15013869352',
		email: 'asdf@test.com',
		address: '同乐村',
		avatar: 'https://picsum.photos/id/1005/200/200',
		qrcode: 'https://picsum.photos/id/237/100/100'
	}

	// 模板列表
	const templates = [{
			id: 'default',
			name: '默认模板',
			component: "TemplateDefault",
		},
		{
			id: 'elegant',
			name: '优雅风格',
			component: "TemplateElegant",
		},
		{
			id: 'modern',
			name: '现代风格',
			component: "TemplateModern",
		},
		{
			id: 'professional',
			name: '商务风格',
			component: "TemplateProfessional",
		},
	]

	// 选择模板
	const selectTemplate = (templateId) => {
		console.log(templateId)
		setTemplate(templateId)
		toast.success('模板已选择')

		// 延迟返回，让用户看到选择效果
		setTimeout(() => {
			router.push({
				path: '/pages/card/card'
			})
		}, 500)
	}
</script>

<style scoped>
	.templates-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30rpx;
		padding: 20rpx;
		/* ----------- */
		height: 1200rpx;
		/* 固定容器高度 */
		overflow-y: auto;
		/* 纵向内容超出时显示滚动条 */
	}

	.template-item {
		position: relative;
		padding: 10rpx;
	}

	.template-preview {
		height: 300rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #eee;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.template-name {
		text-align: center;
		margin-top: 10rpx;
		font-size: 28rpx;
		color: #333;
	}

	.template-selector {
		position: absolute;
		top: 15rpx;
		right: 15rpx;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #007aff;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
	}
</style>